<template>
  <div class="category">
    <nut-navbar fixed>
      <template #left>
        <div>商品分类</div>
      </template>
    </nut-navbar>
    <nut-tabs
      :style="'height: ' + category.maxHeight + 'px'"
      direction="vertical"
      v-model="category.current"
      title-scroll
      title-gutter="10"
      name="tabName"
    >
      <nut-tab-pane
        v-for="first in category.list"
        :title="first.name"
        :pane-key="first.id"
        :key="first.id"
      >
        <div v-for="second in first.children" :key="second.id">
          <nut-cell :title="second.name"></nut-cell>
          <nut-grid :column-num="3" :border="false">
            <nut-grid-item
              v-for="third in second.children"
              :key="third.id"
              :text="third.name"
              @click="
                $router.push({
                  path: '/search',
                  query: { categoryId: third.parentId },
                })
              "
            >
              <img class="quick-img" :src="third.icon" alt="" />
            </nut-grid-item>
          </nut-grid>
        </div>
      </nut-tab-pane>
    </nut-tabs>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();

onMounted(() => {
  proxy.$productApi.category
    .treeList()
    .then((res) => {
      category.list = res.data;
      category.current = res.data[0].id;
    })
    .catch((error) => {});
});

const category = reactive({
  maxHeight: `${document.documentElement.clientHeight}` - 96,
  current: null,
  list: [],
});
</script>

<style lang="less" scoped>
.category {
  .nut-tab-pane {
    padding: 0px;
  }
  .nut-cell {
    margin: 0px;
    box-shadow: none;
    margin-top: 10px;
    font-weight: bold;
    font-size: 13px;
  }
  :deep(.nut-tabs.vertical .nut-tabs__titles) {
    padding: 0px !important;
  }
  :deep(.nut-tabs__titles-item) {
    margin-top: 0px !important;
  }
  :deep(.nut-grid-item__content) {
    padding: 5px 8px;
  }
  .quick-img {
    width: 70px;
    height: 70px;
  }
}
</style>